<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8">
        <div class="pt-5">
          <span class="display-1 font-weight-bold">发表文章</span>
          <div class="pt-9">
            <span style="color:#365A89;">标题</span>
            <v-form ref="form" class="pt-0">
              <v-text-field required v-model="article.title"></v-text-field>
            </v-form>
            <span style="color:#365A89;">内容</span><br />
            <div class="pt-5">
              <vue-editor
                useCustomImageHandler
                @imageAdded="AddImage"
                v-model="article.content"
              ></vue-editor>
            </div>
            <div class="mt-8">
              <span style="color:#365A89;">分类</span>
            </div>
            <v-select
              :items="items"
              v-model="article.category"
              @change="changeCat"
            ></v-select>
          </div>
        </div>
        <div class="mt-8">
          <span style="color:#365A89;">封面图</span>
        </div>
        <v-avatar @click="upload" class="my-5 pr-2" size="72" style="cursor:pointer;">
          <img :src="article.cover_image" />
        </v-avatar>
        <input
          type="file"
          id="upload"
          ref="upload"
          @change="changeimg"
          accept=".jpg, .jpeg, .png"
          style="display:none;"
        />
        <div class="pb-9">
          <v-btn color="primary" @click="save">
            发表文章
          </v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor
  },
  props: {
    id: {}
  },
  data() {
    return {
      article: {
        cover_image: require("@/assets/bar/other.jpg")
      },
      items: [
        "绘画",
        "视频",
        "写作",
        "游戏",
        "音乐",
        "播客",
        "摄影",
        "技术",
        "Vtuber",
        "舞蹈",
        "体育",
        "旅游",
        "美食",
        "时尚",
        "数码",
        "动画",
        "翻译",
        "其他"
      ],
      category: "Foo"
    };
  },
  created() {
    this.id && this.fetchArticle();
  },
  methods: {
    async AddImage(file, Editor, cursorLocation, resetUploader) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)
      console.log("111");
      const formData = new FormData();
      formData.append("pic", file);
      const res = await this.$http.post("uploads/", formData);
      Editor.insertEmbed(cursorLocation, "image", res.data.msg);
      resetUploader();
    },
    async fetchArticle() {
      if (this.id) {
        const res = await this.$http.get(`article_by_id/?id=${this.id}`);
        this.article = res.data.list[0].fields;
      }
    },
    changeCat(value) {
      console.log(value);
    },
    async save() {
      this.article.name = localStorage.getItem("name");
      console.log(this.article);
      if (!this.id) {
        const res = await this.$http.post("create_article/", this.article);
        if (res.data.error_num === 0) {
          this.$toast({
            text: "发表成功",
            type: "success",
            duration: 3000
          });
          this.article = "";
          this.article.cover_image = require("@/assets/bar/other.jpg");
        }
      }else{
        this.article.id = this.id
        const res = await this.$http.post("edit_article/", this.article);
        if (res.data.error_num === 0) {
          this.$toast({
            text: "修改成功",
            type: "success",
            duration: 3000
          });
        }
      }
    },
    upload() {
      let uploadbtn = this.$refs.upload;
      uploadbtn.click();
    },
    async changeimg(e) {
      let formData = new FormData();
      formData.append("pic", e.target.files[0]);
      const res = await this.$http.post("uploads/", formData);
      this.article.cover_image = res.data.msg;
    }
  }
};
</script>

<style></style>
